<template>
   <div class='mt-2'>
      <div class='space-y-4 px-4 pb-4'>
        <Field
          title="workflow.nodes.end.output.variable"
        >
          <template #operations v-if="!readOnly">
             <Button @click="handleAddVariable" ><PlusOutlined /></Button>
          </template>
          <VarList
            :nodeId="id"
            :readonly="readOnly"
            :list="outputs"
            @change="handleVarListChange"
          />
        </Field>
      </div>
    </div>
</template>
<script setup lang="ts" name="EndPanel">
import useConfig from './use-config'
import type { EndNodeType } from './types'
import VarList from '@/components/workflow/nodes/_base/components/variable/var-list.vue'
import Field from '@/components/workflow/nodes/_base/components/field.vue'
import type { NodePanelProps } from '@/app/components/workflow/types'
import { PlusOutlined } from '@ant-design/icons-vue'


const props = defineProps<NodePanelProps<EndNodeType>>();

const {
  readOnly,
  inputs,
  handleVarListChange,
  handleAddVariable,
} = useConfig(props.id, props.data)

const outputs = inputs.outputs

</script>